<!--
 * @Author: Badcandy 568197314@qq.com
 * @Date: 2023-01-10 22:04:39
 * @LastEditors: Badcandy 568197314@qq.com
 * @LastEditTime: 2023-01-11 20:16:08
 * @FilePath: \dcollege\src\components\noteCard.vue
 * @Description: 
 * 
 * Copyright (c) 2023 by Badcandy 568197314@qq.com, All Rights Reserved. 
-->
<template>
  <div @click="goEditor" class="noteCard-bg">
    <div class="title">
      <span>{{ props.title }}</span>
    </div>
    <div class="content">
      <span>{{ textF(props.content) }}</span>
    </div>
    <div class="date">
      <span>{{ props.date }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter, type LocationQueryValueRaw } from "vue-router";

const router = useRouter();
const props = defineProps({
  title: {
    type: String,
    default: null,
  },
  content: {
    type: String,
    default: "",
  },
  date: {
    type: String,
    default: null,
  },
});
function textF(value: String): String {
  if (!value) return "";
  if (value.length > 50) {
    return value.slice(0, 50) + "...";
  }
  return value;
}
function goEditor() {
  router.push({
    path: "/editor",
    query: { title: props.title, content: props.content, date: props.date },
  });
}
</script>

<style lang="less" scoped>
.noteCard-bg {
  position: relative;
  width: 85%;
  height: 11.25rem;
  border-style: solid;
  border-width: 1px;
  border-radius: 0.625rem;
  border-color: rgb(229, 229, 229);
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 10px 10px 10px 10px;
}
.title {
  font-size: 1.3rem;
}
.date {
  font-size: 0.625rem;
  color: rgb(210, 210, 210);
}
</style>
